<template>
  <view class="container">
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="我的考试  " :background="background">
    </u-navbar>
    <view>
      <view class="container_title">
        <view class="container_header">
          <view class="">
            <u-tag text="变电" type="success" />
          </view>
          <view class="">
            <u-tag text="输电" type="success" />
          </view>
          <view class="">
            <u-tag text="配电" type="success" />
          </view>
          <view class="">
            <u-tag text="建设" type="warning" />
          </view>
        </view>

        <view class="container_header">
          <view class="">
            <u-tag text="物业" type="success" />
          </view>
          <view class="">
            <u-tag text="工种" type="success" />
          </view>
          <view class="">
            <u-tag text="工种" type="success" />
          </view>
          <view class="">
            <u-tag text="工种" type="success" />
          </view>
        </view>

      </view>

      <view class="container_score">
        <view class="container_score_title">
          <u-icon name="question-circle" class="question-circle"></u-icon>
          我的考试仅显示未合格需要重新考试的考考试信息
        </view>
        <view class="container_study">
          <view class="container_study_card">
            <view class="container_study_card_title">
              <view>
                <u-tag size="mini" class="container_study_card_text" text="输电" type="success" />
                <text class="container_study_card_exam">违章强化学习考试</text>
              </view>
            </view>

            <view class="container_study_card_name">
              <view class="container_study_card_name_1">
                <view class="">
                  2024年输电工种违章强化学习考试-1
                </view>
              </view>
              <view class="container_study_card_name_btn" @click="startExam">
                开始考试
              </view>
            </view>
            <view class="container_study_card_type">
              <view class="">
                总分：100
              </view>
              <view class="">
                合格次数：0
              </view>
              <view class="">
                限考次数：无限制
              </view>
            </view>
          </view>

        </view>

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        listStatus: [{
            name: '全部',
            disabled: false
          },
          {
            name: '已学习',
            disabled: false
          },
          {
            name: '未学习',
            disabled: false
          }
        ],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        status: 'orange',
        listType: [{
            name: '重大违规类'
          },
          {
            name: '中度违规'
          },
          {
            name: '一般违规'
          }
        ],
        currentType: 1
      };
    },
    methods: {
      backIndex() {
           uni.navigateback();
         },
      showMyExam() {
        uni.navigateTo({
          url: '../myexam/myexam'
        })

      },
      // 选中某个单选框时，由radio时触发
      radioChange(e) {
        // console.log(e);
      },
      // 选中任一radio时，由radio-group触发
      radioGroupChange(e) {
        // console.log(e);
      },
      handleStudy() {
        uni.navigateTo({
          url: '../study-item/study-item'
        })
      },
      handleStudyVideo() {
        uni.navigateTo({
          url: '../study-video-item/study-video-item'
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    // height: 100vh;
    background-color: aliceblue;
    margin-bottom: 20rpx;
    height: 100vh;
    overflow-y: scroll;

    .container_title {
      margin: 20rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .container_header {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-bottom: 20rpx;
      }

    }

    .container_score {
      text-align: center;

      .question-circle {
        color: #82B2FF;
        margin-right: 10rpx;
      }

      .container_score_title {
        font-size: 20rpx;
        color: darkgray;
      }

      .container_score_item {
        display: flex;
        justify-content: space-between;
        border-radius: 20rpx;

        .container_score_item_1 {
          margin: 20rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          width: 300rpx;
          background-color: #fff;
          margin-right: 20rpx;

          .error-circle-fill {
            margin-right: 20rpx;
            font-size: 35rpx
          }

          .container_score_item_count {
            font-weight: 700;
            color: red;
            margin-top: 20rpx;
            font-size: 35rpx
          }

          .container_score_item_text {
            margin-top: 20rpx;

            .container_score_item_tit {
              color: red;
              margin-left: 20rpx;
            }
          }
        }

        .container_score_item_2 {
          margin: 20rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          flex: 1;
          background-color: #fff;

          .container_score_item_2_header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .account-fill {
              font-size: 35rpx;
              margin-right: 20rpx;
            }
          }

          .container_score_item_2_count {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin-top: 30rpx;
            // padding: 0 20rpx;
          }
        }
      }

      .container_study {
        margin: 20rpx;

        .container_study_tab {
          margin-top: 20rpx;
        }

        .container_study_status {
          background-color: #fff;
          border-radius: 20rpx;
          padding: 20rpx;
          margin-top: 20rpx;

        }

        .container_study_card {
          background-color: #fff;
          margin-top: 20rpx;
          border-radius: 20rpx;
          padding: 20rpx;

          .container_study_card_title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .container_study_card_text {
              margin-right: 20rpx;
            }

            .container_study_card_exam {
              font-size: 22rpx;
              color: darkgray;
            }

            .container_study_card_status {
              color: red;
            }
          }

          .container_study_card_name {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .container_study_card_name_1 {
              width: 60%;
              margin-top: 20rpx;
              text-align-last: left;


            }

            .container_study_card_name_btn {
              color: red;
            }

            .play-circle {
              font-size: 50rpx;
              color: #A0CFFF;
            }

          }

          .container_study_card_type {
            display: flex;
            justify-content: space-between;
            font-size: 22rpx;
            color: darkgray;
            text-align-last: left;
            margin-top: 20rpx;
          }
        }
      }
    }
  }
</style>